<template>
	<li class="goods-item">
		<div class="img-wrap">
			<a :href="domain+'/goods/detail?gdsId='+item.gdsId" target="_blank"><img :src="item.gdsImg" alt=""/></a>
			<div class="shadow" v-if="item.residueNum===0">区域无货</div>
		</div>
		<div class="flex-1">
			<a :href="domain+'/goods/detail?gdsId='+item.gdsId" target="_blank" :title="item.gdsName" class="goods-name">
				 {{item.gdsName}}{{item.gdsName}}
			</a>
			<div class="progress-wrap">
				<StorkProgress :themeColor="themeColor"  class="flex-1" :totalNum="item.buysNum+item.residueNum" :dataNum="item.residueNum" formatData="剩 {#data}件" formatPer=""/>
				<span class="sale-amount">已订 {{item.buysNum}}件</span>
			</div>
			<div class="bottom-wrap">
				<div class="price" v-if="item.realPrice"><small>￥</small><b>{{fen2Yuan(item.realPrice as number)}}</b></div>
				<div class="old-price" v-if="item.beforePrice">￥{{fen2Yuan(item.beforePrice as number)}}</div>
				<van-tag plain type="danger">{{typeCate(cate)}}</van-tag>
			</div>
		</div>
	</li>
</template>
<style lang="scss" scoped>
.goods-item{
	--van-primary-color: v-bind(themeColor);
	margin-bottom:10px; position: relative; overflow:hidden; padding: 4px;
	background-color: var(--white-color); border-radius:8px;
	display:flex; align-items:center;
	.img-wrap{
		width:auto;height:calc( (100vw - 28px)/3);aspect-ratio: 1; position:relative;overflow:hidden; border-radius:8px;
		img{ width:100%;height:100%; }
		.shadow{
			position:absolute; bottom:0;left:0;width:100%;color:var(--white-color);
			background-color: rgba(0,0,0,.5);height:24px; line-height:24px;text-align: center;
		}
	}
	.goods-name{
		width:calc( 2*(100vw - 28px)/3);
		font-size:14px;color:var(--font-first-color); height:40px; line-height:20px; padding:0 8px; margin:8px 4px;
		overflow: hidden; text-overflow: ellipsis; word-break: break-all;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.progress-wrap{
		margin:10px 10px 10px 12px; display:flex; align-items: center;
	}
	.bottom-wrap{
		display: flex; justify-content:flex-start; align-items:flex-end; margin:0 8px 0 12px;
		.old-price{
			color:var(--font-disable-color); font-size:14px;text-decoration:line-through; margin-left:4px; margin-right:auto;
		}
	}
	.price{
		text-align: left; color:var(--van-primary-color);
		line-height:24px; height: 24px;
		b{font-size:24px;font-weight: 500;}
		small{font-size:16px;font-family:Arial;}
	}

	.sale-amount{color:var(--font-third-color); margin-left:8px; font-size:12px;}
	.about-shop{
		margin:12px;font-size:14px;
		display: flex; justify-content: space-between;
		a{
			display: flex; align-items: center; color:var(--font-third-color); line-height: 16px; width:140px;
			overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
			.van-icon{margin-right:3px; flex-shrink: 0;font-size:16px;}
			span{display:block;flex:1;overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}
		}
	}
}
</style>
<script lang="ts" setup generic="T">
import {fen2Yuan} from "@/utils/validate";
import {ActGds} from "@/types"
import StorkProgress from "@/components/act/StorkProgress.vue";
const props = defineProps<{
	item:ActGds,
	cate:String,
	themeColor:String,
}>()
const domain = ref('')

//methods
const typeCate=(cateId:string)=>{
	switch (cateId){
		case '01':return '单品优惠'
		case '02':return '订单优惠'
		case '03':return '外围优惠'
		default: return ''
	}
}
</script>